<template>
  <div>
    <!-- 顶部导航栏 -->
    <van-sticky :offset-top="0">
      <van-nav-bar title="万山" class="dingbu">
        <template #left>
          <van-icon name="more-o" size="22" color="#ccc" />
        </template>
        <template #right>
          <van-icon name="search" size="22" color="#ccc" />
        </template>
      </van-nav-bar>
    </van-sticky>
    <!-- 顶部图 -->
    <div class="top_tu">
      <h1 class="title">日月山</h1>
      <van-image
        width="100%"
        height="20rem"
        fit="cover"
        src="https://img01.yzcdn.cn/vant/cat.jpeg"
      />
    </div>

    <!-- 引文 -->
    <p>
      日月山，历来是内地赴西藏大道的咽喉。早在汉、魏、晋以至隋
      、唐等朝代，都是中原王朝辖区的前哨和屏障。故有“西海屏风”
      、“草原门户”之称。北魏明帝神龟元年(公元420年)，僧人宋云
      自洛阳西行求经，便是取道日月山前往天竺。
    </p>
    <div class="content">
      <div id="details" v-for="details in 5">
        <van-image
          width="100%"
          height="12rem"
          fit="cover"
          src="https://img01.yzcdn.cn/vant/cat.jpeg"
        />
        <h3>唐蕃古道</h3>
        <p>
          穿过日月山坊，是当年文成公主经日月山赴吐蕃和亲走的道，叫
          唐蕃古道。古道旁，有文成公主纪念馆和日月山神牛塑像，纪念
          馆内，供奉着松赞干布和文成公主塑像。
        </p>
      </div>
    </div>
  </div>
</template>

<script>
export default {};
</script>

<style lang="scss" scoped>
// 顶部样式
.dingbu {
  background-color: #fff;
}
.top_tu {
  display: flex;
  position: relative;
  top: 0;
  padding-bottom: 2rem;
  .title {
    position: absolute;
    z-index: 10;
    top: 55%;
    left: 2rem;
    color: #fff;
    font-size: 3rem;
  }
}

// 内容
.content{
  border-top: 7px solid #78006e;
}
#details{
  h3{
    padding: 1rem;
  }
  p{
    padding: 1rem;

  }
}
</style>
